<template>
  <div>
    <!-- 修改模态框开始 -->
    <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" >
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.pname" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="身份证号码" :label-width="formLabelWidth">
          <el-input v-model="form.pcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.ptel" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.page" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="form.psex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="住址" :label-width="formLabelWidth">
          <el-input v-model="form.paddress" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-input v-model="form.pbirthday" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-input v-model="form.pimage" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="update">修改</el-button>
      </div>
                    <el-row>
            <el-col :span="12">
                <el-upload
                  action="http://localhost:8000/doctor-serv/upload/dcertificate"
                  list-type="picture-card"
                  :on-success="handleSuccess"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <label>上传头像</label>
            </el-col>          
          </el-row>
    </el-dialog>
    <!-- 修改模态框结束 -->
      <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="pname" label="姓名" width="80">
      </el-table-column>
      <el-table-column prop="pcard" label="身份证号" width="160">
      </el-table-column>
      <el-table-column prop="ptel" label="联系电话" width="100">
      </el-table-column>
      <el-table-column prop="page" label="年龄" width="60"> 
      </el-table-column>
            <el-table-column prop="psex" label="性别" width="60"> 
      </el-table-column>
            <el-table-column prop="paddress" label="住址" width="150"> 
      </el-table-column>
            <el-table-column prop="pbirthday" label="出生日期" width="100"> 
      </el-table-column>
            <el-table-column label="头像" width="180" >
      <template slot-scope="scope" >
        <img :src="scope.row.pimage"  class="picture"/>
      </template> 
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="updateUI(scope.row)">修改</el-button>
        </template >
      </el-table-column>
    </el-table>
  </div>

</template>
<script>
export default {
  mounted() {
    this.updateTable();
  },
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        pname: "",
        pcard: "",
        page: "",
        paddress: "",
        psex: "",
        ptel: "",
        pbirthday: "",
        pimage: "",
      },
      formLabelWidth: "120px",
      dialogImageUrl: '',
    };
  },
  methods: {
    updateTable() {
          let pid=JSON.parse(sessionStorage.getItem("pat")).pid;
          this.$axios.post("patient-serv/patientinfo/selPatinfoReturnList/"+pid).then((response) => {
          let r = response.data;
          this.tableData=r.data;
        });
    },
        updateUI(row) {
      this.dialogFormVisible = true;
      // 回显数据
      this.form = row;
    },
    update() {
      this.$axios.post("patient-serv/patientinfo/updatePatinfo", this.form).then((response) => {
        let r = response.data;
        if(r.code == 200) {
            // 提示成功
            this.$message({
              message: '修改个人信息成功',
              type: 'success'
            });
            // 关闭模块框
            this.dialogFormVisible = false;
        }
        
      });
    },
      // 资格证书上传
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //成功回调函数
    handleSuccess(resp){
      console.log(resp.data);
      let r=resp.data;
        // 替换原始图片
      this.form.pimage=r;
    
    }
  }
};
</script>

<style>

</style>